<template>
  <div class="refine_outpublish">
    <h2 class="titleblue">发布外网公告</h2>
    <div class="contant">
      <el-form ref="form" :model="form" label-width="90px">
        <el-row :gutter="24">
          <el-form-item label="公告类型">
            <el-select v-model="form.type" class="select-width-220">
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="短信内容">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="发文至外部">
            <data-tree title="外部通讯录发送" ref="outsideGroup" :groupData="groupData"></data-tree>
          </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="发文至内部">
            <data-tree title="内部通讯录发送" ref="internalGroup" :groupData="groupData1"></data-tree>
          </el-form-item>
        </el-row>
        <el-row :gutter="24">
          <el-form-item label="发送时间">
            <el-date-picker v-model="form.sendTime" align="right" type="datetime" placeholder="选择发送时间"
                            value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-row>
        <el-row :gutter="24" style="text-align: center;" class="footer-row">
          <el-form-item>
            <el-button @click="creatsure" class="sure">发布</el-button>
            <el-button @click="creatcancel" class="cancel">取消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import DataTree from "@/components/common/DataTree.vue"
  import * as noticeService from '@/services/NoticeService'
  import dictionaryService from '@/services/DictionaryService'
  import contactService from '@/services/ContactService'
  import groupService from '@/services/GroupService'

  export default {
    components: {
      'data-tree': DataTree
    },
    data: function () {
      return {
        form: {
          type: '',
          content: '',
          sendTime: ''
        },
        groupData: [],
        groupData1: [],
        options: [],
      };
    },
    async created() {
      let options = await dictionaryService.find('GGLX');
      this.options = options.map((option) => {
        return {
          "label": option.name,
          'value': option.id
        }
      });
      this.groupData2()
    },
    activated() {
      this.groupData2()
    },
    methods: {
      groupData2() {
        let arr = [];
        contactService.search('insideGroup==true').then((res) => {
          arr.push({
            name: '全部',
            id: 0,
            users: res.map(c => {
              return {name: c.name, id: c.id}
            })
          });
          groupService.search('insideGroup==true').then((data) => {
            data.forEach(group => {
              arr.push({
                name: group.name,
                id: group.id,
                users: group.contacts.map(c => {
                  return {name: c.name, id: c.id}
                })
              })
            });
            this.groupData = arr;
          });
        });
        let arr1 = [];
        contactService.search('insideGroup==false').then((res) => {
          arr1.push({
            name: '全部',
            id: 0,
            users: res.map(c => {
              return {name: c.name, id: c.id}
            })
          });
          groupService.search('insideGroup==false').then((data) => {
            data.forEach(group => {
              arr1.push({
                name: group.name,
                id: group.id,
                users: group.contacts.map(c => {
                  return {name: c.name, id: c.id}
                })
              })
            });
            this.groupData1 = arr1;
          });
        });
      },
      creatsure() {
        let arr = []
        if (!this.$refs.outsideGroup.members && !this.$refs.internalGroup.members) {
          this.$alert('请选择需要发送信息的人员', '提示')
          return false;
        }
        let sendTime;
        if (!this.form.sendTime) {
          this.$alert('请选择发送时间', '提示')
          return false;
        } else {
          sendTime = new Date(this.form.sendTime)
        }
        if (this.$refs.internalGroup.members) {
          for (let i of this.$refs.internalGroup.members) {
            arr.push(i.id)
          }
        }

        let arr1 = []
        if (this.$refs.outsideGroup.members) {
          for (let i of this.$refs.outsideGroup.members) {
            arr1.push(i.id)
          }
        }
        let params = {
          content: this.form.content,
          type: this.form.type,
          typeName: this.options.find(o => o.value === this.form.type).label,
          internalGroup: arr.join(','),
          outsideGroup: arr1.join(','),
          sendTime: sendTime,
          releaseFlag: true,
          intranetFlag: false,
          pushFlag: true,
          source: this.$profile.organiza.name,
        };
        noticeService.createNotice(params).then(() => {
          this.$alert('发布成功', {
            callback: action => {
              this.form = {};
              this.$emit("close");
            }
          });
        });
      },
      creatcancel() {
        this.$emit("close");
      },
      onMouseOver(id) {
        this.active = id;
      },
      onMouseOut() {
        this.active = '';
      }
    }
  };
</script>

<style lang="scss">
  .refine_outpublish {

    .el-input input {
      border-radius: 2px;
      border: solid 1px #dddddd;
    }
    .input-width-460 input {
      width: 460px;
    }
    .el-textarea textarea {
      height: 86px;
      border-radius: 2px;
      border: solid 1px #dddddd;
    }
    .el-row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
    .footer-row .el-form-item__content {
      margin-left: 0px !important
    }
  }
</style>
